<template>
	<view class="content">
		<view class="search_box">
			<u--input placeholder="请输入门店名称" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #5CAF5D"
				border="surround" v-model="storeName" shape="circle" @change="throttledSearchStore"></u--input>
		</view>
		<view class="text-area">
			<u-tabs :list="list1" @click="handelclick" :itemStyle='{
					fontSize: "28rpx",
					height: "70rpx",
					boxSizing: "border-box"
					}' :activeStyle='{
					color:"#5CAF5D",
					fontWeight: "bold",
					}' :inactiveStyle='{
					color:"#000000", 
					}' lineHeight='8rpx' lineColor="#5CAF5D"></u-tabs>
		</view>
		<view class="map_">
			<map style="width: 100%; height: 115%;" :latitude="markers[0].latitude" :covers="covers"
				:longitude="markers[0].longitude" :markers="markers">
			</map>
		</view>
		<view style="height: 640rpx;overflow: auto; overflow-y: scroll;">
			<view class="store_list" v-for="item in storeList" :key="item.id" @click="ChangeStore(item)">
				<view class="store_location">
					<view class="store_name">
						<view>
							{{item.name}}
						</view>
					</view>
					<view class="store_middle">
						<view class="loc">
							<image style="width: 40rpx;height: 40rpx;margin-right: 20rpx;margin-bottom: -12rpx;"
								src="../../static/img/storeimg.png" mode=""></image>
							<text>{{item.addressMap}}</text>
						</view>
						<view style="width: 5%;margin-top: 15rpx;">
							<view class="switch_click" :class="{isActive : item.id == storeId}">
								<view class="switch_click2" :class="{isActive2 : item.id == storeId}"></view>
							</view>
						</view>
					</view>
					<view class="pho">
						<image style="width: 40rpx;height: 40rpx;margin-right: 20rpx;margin-bottom: -12rpx;"
							src="../../static/img/phoneimg.png" mode=""></image>
						<text>{{item.mobile}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="classify_foot" @click="goStoreDeatils">
			进入店铺
		</view>
	</view>
</template>

<script>
	import lons from "@/api/lon.js"
	export default {
		data() {
			return {
				list1: [{
					type: '',
					name: '全部',
				}, {
					type: 1,
					name: '餐饮',
				}, {
					type: 2,
					name: '商超'
				}, {
					type: 3,
					name: '食堂',
				}, {
					type: 4,
					name: '咖啡'
				}],
				storeName: "", //店铺名字
				storeList: "", //店铺列表
				storeId: "",
				markers: [{
					id: 1,
					latitude: null,
					longitude: null,
					iconPath: "https://goods.ruanmengkeji.cn/api/fileUp/b82d8c70-83f3-42e6-8461-d88300c8672e.png",
					width: 30,
					height: 30,
					callout: {
						content: '这里是标点',
						color: '#000000',
						fontSize: 14,
						borderRadius: 10,
						bgColor: '#ffffff',
						padding: 10,
						display: 'ALWAYS',
						anchorY: 10,
					}
				}],
				covers: [],
			}
		},
		onLoad() {
			let data = {
				type: ""
			}
			this.getChooseLocation().then(() => {
				return this.handelclick(data)
			})
			this.throttledSearchStore = this.debounce(this.searchStore, 1000);
		},
		methods: {
			handelclick(e) {
				let data = {
					type: e.type,
					lat: this.markers[0].latitude,
					lng: this.markers[0].longitude,
					kw: this.storeName,
					shop_id: ""
				}
				lons.nearby(data).then(res => {
					if (res.code == 0) {
						this.storeList = res.data
						if (this.storeList.length > 0) {
							this.storeId = this.storeList[0].id
							this.markers[0].latitude = this.storeList[0].lat
							this.markers[0].longitude = this.storeList[0].lng
							this.markers[0].callout.content = this.storeList[0].address
						}else{
							this.storeId = null
						}
					}
				})
			},

			searchStore() {
				// 在这里执行你的搜索逻辑
				console.log('执行搜索逻辑');
			},
			debounce(func, wait) {
				let timeout;
				return function(...args) {
					const context = this;
					clearTimeout(timeout);
					timeout = setTimeout(() => {
						func.apply(context, args);
					}, wait);
				};
			},

		//选择店铺
		ChangeStore(val) {
			console.log(val);
			this.storeId = val.id
			this.markers[0].latitude = val.lat
			this.markers[0].longitude = val.lng
			this.markers[0].callout.content = val.address
		},
		//获取当前位置
		getChooseLocation() {
			return new Promise((resolve, reject) => {
				let that = this;
				uni.getLocation({
					success: function(res) {
						that.markers[0].latitude = res.latitude;
						that.markers[0].longitude = res.longitude;
						resolve();
					},
					fail: function(err) {
						reject(err);
					}
				});
			});
		},
		goStoreDeatils(){
			if(this.storeId){
				uni.navigateTo({
					url:`/homepage/storedeatils/storedeatils?id=${this.storeId}`
				})
			}else{
				uni.$u.toast('请先选择店铺!');
			}
			
		}
	}
	}
</script>

<style lang="scss" scoped>
	.map_ {
		width: 750rpx;
		height: 350rpx;
	}

	.search_box {
		margin: auto;
		width: 710rpx;
		height: 66rpx;
		background: #FFFFFF;
		border-radius: 44rpx 44rpx 44rpx 44rpx;
	}

	.text-area {
		margin: 28rpx 10rpx 0 0;
	}

	.store_list {
		width: 670rpx;
		height: 204rpx;
		padding: 20rpx;
		margin: auto;
		margin-top: 20rpx;
		background-color: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		display: flex;
		align-items: center;

		.store_name {
			width: 670rpx;
			height: 44rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #333333;
			line-height: 44rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}

		.switch_click {
			width: 32rpx;
			height: 32rpx;
			background: #FFFFFF;
			border: 2rpx solid #818181;
			border-radius: 32rpx 32rpx 32rpx 32rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.switch_click2 {
				width: 20rpx;
				height: 20rpx;
				border-radius: 50%;
			}
		}

		.isActive {
			border: 2rpx solid #5CAF5D;
		}

		.isActive2 {
			background: #5CAF5D;
		}

		.store_location {

			.store_middle {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.loc {
				width: 95%;
				height: 52rpx;
				margin-top: 15rpx;
				white-space: nowrap;
				/* 不换行 */
				overflow: hidden;
				/* 隐藏超出的内容 */
				text-overflow: ellipsis;

				/* 超出的部分显示为省略号 */
				text {
					display: inline-block;
					font-size: 28rpx;
				}
			}

			.pho {
				margin-top: 15rpx;
				font-size: 28rpx;
			}
		}


	}

	.classify_foot {
		width: 710rpx;
		height: 92rpx;
		margin: 20rpx auto;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		background: #5CAF5D;
		text-align: center;
		line-height: 92rpx;
		font-size: 32rpx;
		color: white;
	}
</style>